<template>
  <el-form ref="form" :rules="rules" :model="currentAdmin" label-width="80px" class="demo-form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="currentAdmin.username" :disabled="!!currentAdmin.id"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password" v-if="!currentAdmin.id">
      <el-input v-model="currentAdmin.password"></el-input>
    </el-form-item>

    <el-form-item label="姓名" prop="name">
      <el-input v-model="currentAdmin.name"></el-input>
    </el-form-item>

    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="currentAdmin.mobile"></el-input>
    </el-form-item>
    <el-form-item label="用户角色" prop="userRole">
      <el-select v-model="currentAdmin.userRole "  placeholder="请选择">
        <el-option
          v-for="item in UserRoles"
          :key="item.value"
          :label="item.text"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="区域" v-if="currentAdmin.userRole==='AREAADMIN'">
      <el-cascader
        :options="areaTree"
        v-model="curArea"
        :show-all-levels="false"
        :props="props"
        change-on-select
        @change="selectArea">
      </el-cascader>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save('form')">保存</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import md5 from "js-md5";
import Status from "@/libs/status";
import { checkMobile, uniqueUsername } from "@/libs/checkRules";

export default {
  props: {
    isClose: Boolean
  },
  created() {
    this.refresh();
  },
  mounted() {
    this.$watch("currentAdmin", val => {
      this.curArea = [];
      this.getParentIds();
    });
  },
  computed: {
    ...mapGetters({
      adminInfo: "adminInfo",
      departTree: "departTree",
      areaTree: "areaTree",
      currentAdmin: "currentAdmin"
    })
  },
  data() {
    return {
      curArea: [],
      curDepart: [],
      rules: {
        username: [
          { required: true, message: "请输入登录用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur"
          },
          { validator: uniqueUsername, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入初始密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入管理员手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ],
        userRole: [
          { required: true, message: "请选择用户角色", trigger: "blur" }
        ]
      },
      userTypes: Status.UserTypes,
      DataPermission: Status.DataPermission,
      UserRoles: Status.UserRoles,
      ProTypes: Status.ProTypes,
      departProps: {
        label: "departName",
        value: "id",
        children: "children"
      },
      props: {
        label: "name",
        value: "code",
        children: "children"
      }
    };
  },
  methods: {
    selectArea(value) {
      if (value) {
        this.currentAdmin.area = value[value.length - 1];
      }
    },
    getParentIds() {
      this.curArea.push(this.currentAdmin.area);
    },
    selectDepart(value) {
      if (value) {
        this.currentAdmin.depart.id = value[value.length - 1];
      }
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.currentAdmin.userRole !== "AREAADMIN") {
            this.currentAdmin.area = null;
            this.curArea = [];
          } else {
            if (
              this.currentAdmin.area === null ||
              this.currentAdmin.area === ""
            ) {
              this.$message({
                message: "警告哦，请选择区域",
                type: "warning"
              });
              return false;
            }
          }
          if (!this.currentAdmin.id) {
            this.currentAdmin.pwd = md5(this.currentAdmin.password);
            this.$store
              .dispatch("addAdminUserS", this.currentAdmin)
              .then(ret => {
                this.$notify({
                  title: "管理员添加成功",
                  type: "success"
                });
                this.back();
              });
          } else {
            this.currentAdmin.userId = this.currentAdmin.id;
            this.$store
              .dispatch("updateAdminUserS", this.currentAdmin)
              .then(ret => {
                this.$notify({
                  title: "管理员保存成功",
                  type: "success"
                });
                this.back();
              });
          }
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    },
    refresh() {
      // var para = {};
      // this.$store.dispatch("getDepartTree", para).then(ret => {});
    }
  },
  components: {}
};
</script>
<style>
</style>
